import React from 'react'
import classNames from 'classnames'
import './todo.css'

class Todo extends React.Component {
    constructor(props) {
        super(props);
        this.state = {
            editing: false
        };
        this.handleDoneEdit = this.handleDoneEdit.bind(this);
        this.handleKeyUp = this.handleKeyUp.bind(this);
        this.handleDoubleClick = this.handleDoubleClick.bind(this);
        this.handleToggle = this.handleToggle.bind(this);
        this.handleDeleteTodo = this.handleDeleteTodo.bind(this)
    }

    /**
     * 显示框被双击进入编辑模式
     * @param todo
     */
    handleDoubleClick(todo) {
        this.setState({
            editing: true
        });
        this.editedBefore = todo.text;
        this.textInput.value = todo.text;
        setTimeout(() => {
            let len = todo.text.length;
            this.textInput.focus();
            this.textInput.setSelectionRange(len, len)
        }, 20)
    }

    /**
     * 列表中的todo item的修改
     */
    handleDoneEdit() {
        if (!this.state.editing) {
            return
        }

        this.setState({
            editing: false
        });
        const text = this.textInput.value.trim();
        if (text !== '') {
            this.props.onChangeTodo(this.props.todo.id, text)
        } else {
            this.handleDeleteTodo()
        }
    }

    /**
     * 取消编辑
     */
    handleCancelEdit() {
        this.setState({
            editing: false
        });
        this.textInput.value = this.editedBefore
    }

    /**
     * 处理键盘操作
     * @param e
     */
    handleKeyUp(e) {
        switch (e.keyCode) {
            case 13:    // 回车
                this.handleDoneEdit();
                break;
            case 27:    // ESC
                this.handleCancelEdit();
                break;
            default:
                break;
        }
    }

    handleToggle() {
        this.props.onToggleTodo(this.props.todo.id)
    }

    handleDeleteTodo() {
        this.props.onDeleteTodo(this.props.todo.id)
    }

    render() {
        let todo = this.props.todo;
        return (
            <div className={classNames('todo', {
                completed: todo.completed,
                editing: this.state.editing
            })}>
                <div className={classNames('view')}>
                    <input type="checkbox"
                           className="toggle"
                           onChange={() => this.handleToggle(todo)}
                           checked={todo.completed}/>
                    <label onDoubleClick={() => this.handleDoubleClick(todo)}>{todo.text}</label>
                    <button onClick={this.handleDeleteTodo} className="destroy"/>
                </div>
                <input type="text"
                       className="edit"
                       ref={(input) => this.textInput = input}
                       onBlur={this.handleDoneEdit}
                       onKeyUp={this.handleKeyUp}/>

            </div>
        )
    }
}

export default Todo

